import React from "react";
class App extends React.Component {
    render() {
        return (
            <div>
                App
                <button
                    onClick={() => {
                        // 无法捕获到事件的错误信息
                        const obj = {};
                        console.log(obj.a.b);
                    }}>
                    点击发送错误
                </button>
            </div>
        );
    }
}
// ErrorBoundary
// 1、 无法捕获自身组件错误，只能捕获子组件的错误信息
// 2、 一般用来包裹根组件实例
// 3、 函数组件暂时没有错误边界的实现
class ErrorBoundary extends React.Component {
    constructor() {
        super();
        this.state = { hasError: false };
    }
    // 无错误时候不会触发 getDerivedStateFromError新增的生命周期
    static getDerivedStateFromError(error) {
        console.log("getDerivedStateFromError触发了");
        console.log(error); // 收集到错误信息，上传错误信息到服务器，并发送企业微信或邮件通知开发者和测试
        return { hasError: true };
    }
    // 无错误时候不会触发,在getDerivedStateFromError之后执行
    componentDidCatch(error, errorInfo) {
        console.log("componentDidCatch触发了"); //
        console.log(error, errorInfo);
    }

    render() {
        if (this.state.hasError) {
            return <div>你页面报错了呢</div>; // 降级UI
        }
        // 页面无错误返回子组件
        return this.props.children;
    }
}
export default function Index() {
    return (
        <ErrorBoundary>
            <App></App>
        </ErrorBoundary>
    );
}
